﻿

.mud-codeblock {
  height: 100%;
  padding: 24px;
  overflow: auto;

  & pre {
    height: 100%;
    color: var(--mud-palette-text-primary);
    padding: 0;
    font-size: 1em;
    font-family: Consolas, "Liberation Mono", Menlo, Courier, monospace;
    -webkit-font-smoothing: subpixel-antialiased;
    direction: ltr;
  }

  & .html + .csharp {
    margin-top: 23px;
  }
}

.mud-codeblock {
  & .html, .codearea {
    mark {
      font-weight: 600;
      color: var(--mud-palette-primary);
      background-color: var(--mud-palette-action-default-hover);
      border-radius: 2px;
      padding: 1px 3px;
      margin: 0 0 0 2px;
      user-select: all;
    }

    & .htmlTagDelimiter {
      color: #979797;
    }

    & .htmlElementName {
      color: var(--mud-palette-primary);
      font-weight: 600;
    }

    & .htmlAttributeName {
      color: #8323d8;
    }

    & .htmlOperator, .quot {
      color: #737373;
    }

    & .htmlAttributeValue {
      color: #ff4081;
    }

    & .htmlLink {
      color: #ff4081;
      text-decoration: underline;
    }

    & .enum {
      color: #00c853;
      background-color: var(--mud-palette-gray-light);
    }

    & .enumValue, .sharpVariable {
      color: var(--mud-palette-text-primary);
      background-color: var(--mud-palette-gray-light);
    }

    & .keyword {
      color: #2196f3;
      background-color: var(--mud-palette-gray-light);
    }

    & .atSign {
      color: var(--mud-palette-text-primary);
      background-color: var(--mud-palette-gray-light);
    }

    & .comment {
      color: #57a64a;
    }
  }

  & .csharp {
    & .atSign {
      color: var(--mud-palette-text-primary);
      background-color: var(--mud-palette-gray-light);
    }

    & .keyword {
      color: var(--mud-palette-primary);
    }

    & .string {
      color: #e68c32;
    }

    & .function {
      color: #ff9800;
    }

    & .class {
      color: #1ec8a5;
    }

    & .localVar {
      color: #2196f3;
    }

    & .interface {
      color: #ff4081;
    }

    & .number {
      color: #b0d7a3;
    }

    & .enum {
      color: #b4eb8f;
    }

    & .comment {
      color: #57a64a;
    }
  }
}

.mud-landingpage-editor {
  & .html, .codearea {

    & .htmlTagDelimiter {
      color: #979797;
    }

    & .htmlElementName {
      color: #988ef1;
    }

    & .htmlAttributeName {
      color: #27b5b5;
    }

    & .htmlOperator, .quot {
      color: #c8c8c8;
    }

    & .htmlAttributeValue {
      color: #ededed;
    }

    & .htmlLink {
      color: #61afef;
      text-decoration: underline;
    }

    & .enum {
      color: #b4eb8f;
      background-color: rgba(255,255,255,0.15);
    }

    & .enumValue, .sharpVariable {
      color: #ededed;
      background-color: rgba(255,255,255,0.15);
    }

    & .keyword {
      color: #61afef;
      background-color: rgba(255,255,255,0.15);
    }

    & .atSign {
      color: #000;
      background-color: #d2d295;
    }

    & .comment {
      color: #57a64a;
    }
  }

  & .csharp {
    & .atSign {
      color: #000;
      background-color: #d2d295;
    }

    & .keyword {
      color: #569cd6;
    }

    & .string {
      color: #d69d85;
    }

    & .function {
      color: #dcdcaa;
    }

    & .class {
      color: #4ec9b0
    }

    & .localVar {
      color: #9cdcfe;
    }

    & .interface {
      color: #b0d7a3;
    }

    & .number {
      color: #b0d7a3;
    }

    & .enum {
      color: #b4eb8f;
    }

    & .comment {
      color: #57a64a;
    }
  }
}
